import { memo } from 'react';
import { Link } from 'react-router-dom';

import { Layout } from 'antd';
import logo from '@/assets/images/logo.png';
import SiderMenu from './SiderMenu';
import './index.less';
import { useRecoilState, useRecoilValue } from 'recoil';

import { userState } from '@/store/user';
import { IRouter, IRouterPathKeyRouter } from '@/types/router';
import { collapsedState, themeState } from '@/store/global';

const { Sider } = Layout;

export interface SliderBarProps {
  routeItem: IRouter;
  routerPathKeyRouter: IRouterPathKeyRouter;
}

export default memo(({ routeItem, routerPathKeyRouter }: SliderBarProps) => {
  console.log('render SliderBar');

  const collapsed = useRecoilValue(collapsedState);
  const theme = useRecoilValue(themeState);
  const [user] = useRecoilState(userState);

  return (
    <Sider collapsible collapsed={collapsed} theme={theme} className='leftSlider' trigger={null}>
      <Link to='/home/workplace' className='logo-url'>
        {collapsed ? <img alt='' src={logo} width='30' /> : <h3 className='logo-title'>AdminAntdReact</h3>}
      </Link>
      <SiderMenu
        userRoles={user.roles}
        menuData={routerPathKeyRouter.router}
        routeItem={routeItem}
        collapsed={collapsed}
        theme={theme}
      />
    </Sider>
  );
});
